<template>
  <i-biz-raw-item
    v-if="!!controller.state.visible"
    :class="ns.b()"
    :type="type"
    :content="content"
    @click="onClick"
  />
</template>
<script lang="ts">
export default {
  options: {
    addGlobalClass: true,
    virtualHost: true,
    styleIsolation: "shared"
  }
}
</script>
<script setup lang="ts">
import { useNamespace } from "@/use";
import { FormRawItemController } from "@ibiz-template/runtime";
import {
  IDEFormRawItem,
  IHtmlItem,
  ISysImage,
  ITextItem,
  IUnkownItem,
} from "@ibiz/model-core";
import { PropType } from "vue";
const props = defineProps({
  modelData: {
    type: Object as PropType<IDEFormRawItem>,
    required: true,
  },
  controller: {
    type: FormRawItemController,
    required: true,
  },
});

const ns = useNamespace("form-raw-item");
const { rawItem, sysImage } = props.modelData;

const contentType = rawItem?.contentType;
// 传入内容
let content: string | Object | undefined = undefined;
// 类型
let type = contentType;
if (contentType === "RAW" || contentType === "HTML") {
  if (contentType === "RAW") {
    type = "TEXT";
    content = (rawItem as ITextItem).caption!;
  } else {
    content = (rawItem as IHtmlItem).content!;
  }
} else if (
  ["VIDEO", "DIVIDER", "INFO", "WARNING", "ERROR"].includes(contentType!)
) {
  content = (rawItem as IUnkownItem).rawContent!;
} else if (contentType === "IMAGE" && sysImage) {
  content = sysImage;
}

// 点击
const onClick = (event: MouseEvent) => {
  props.controller.onClick(event);
};
</script>
<style lang="scss">
@include b(form-raw-item) {
  width: 100%;
  height: 100%;
}
</style>
